<template>
  <div :class="Toggle == '1' ? 'age-body' : 'age-Editor'">
    <div class="person-body" v-if="Toggle == '1'">
      <div class="person-top">
        <div class="top-avatar">
          <img src="../../../../../assets/imgs/avatarimg.jpg" alt="" />
        </div>
        <div class="top-name">
          <div class="Editor">
            <div>
              <i class="el-icon-edit-outline" @click="handelClick"></i>
              <span @click="handelClick">编辑</span>
            </div>
          </div>
          <div class="name-age">
            <span>张三</span>
            <span>男</span>
            <span>30岁</span>
            <span>本科</span>
          </div>
          <div class="id-age">
            <span >ID:12345667899455</span>
          </div>
        </div>
      </div>
      <div class="person-btm">
        <i class="el-icon-location-outline"></i>
        <span>河南·南阳·宛城区</span>
        <i class="el-icon-postcard"></i>
        <span>职场精英</span>
        <i class="el-icon-phone-outline"></i>
        <span>18237742511</span>
        <i class="el-icon-message"></i>
        <span>18237742511@163.com</span>
      </div>
    </div>
    <div class="Editor-body" v-if="Toggle == '2'">
      <p class="title">个人信息</p>
      <div class="body">
        <div class="body-left">
          <div><span style="color: red">*</span>姓名：</div>
          <div><span style="color: red">*</span>性别：</div>
          <div><span style="color: red">*</span>身份：</div>
          <div><span style="color: red">*</span>出生年月：</div>
          <div>首次工作时间：</div>
          <div><span style="color: red">*</span>地址：</div>
          <div>联系方式：</div>
          <div>电子邮箱：</div>
        </div>
        <div class="body-cen">
          <p>
            <el-input v-model="input" placeholder="请输入姓名"></el-input>
          </p>
          <div class="sex_box">
            <div
              v-for="(item, index) in dataArr"
              :key="index"
              :class="[ele == item.id ? 'Select' : 'Unchecked']"
              @click="handelEle(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="sex_box">
            <div
              v-for="(item, index) in dataArr1"
              :key="index"
              :class="[select == item.id ? 'Select' : 'Unchecked']"
              @click="handelSelect(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
          <p>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </p>
          <p>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </p>
          <p>
            <el-input v-model="input" placeholder="请输入地址"></el-input>
          </p>
          <p>182*****511 <span>修改</span></p>
          <p>18237742511@163.com <span>修改</span></p>
        </div>
        <div class="body-right">
            <div class="img-avatar"></div>
        </div>
      </div>
      <div class="bottom">
        <p @click="handelOff(2)">取消</p>
        <p @click="handelOff(1)">确认</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Toggle: "1",
      dataArr: [
        { name: "男", id: "1" },
        { name: "女", id: "2" },
      ],
      ele: "1",
      dataArr1: [
        { name: "职场精英", id: "1" },
        { name: "学生", id: "2" },
      ],
      select: "1",
      value1: "", // 生日
      input:'',
    };
  },
  components: {},
  methods: {
    handelClick() {
      this.Toggle = "2";
    },
    // 编辑 性别切换
    handelEle(num) {
      this.ele = num;
    },
    // 切换身份
    handelSelect(num) {
      this.select = num;
    },
    // 取消/确认
    handelOff(num){
        if(num == 1){
            this.Toggle = '1'
        }else{
            this.Toggle = '1'
        }
    }
  },
};
</script>

<style scoped lang="less">
i {
  font-size: 21px;
  vertical-align: middle;
}
span {
  //   vertical-align: middle;
}
.age-body {
  width: 100%;
  height: 100%;
  display: flex;
  background-image: linear-gradient(to right, #fcfeff, #a1b2e4);
  .person-body {
    width: 94%;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    .person-top {
      width: 100%;
      min-height: 100px;
      display: flex;
      .top-avatar {
        width: 100px;
        min-height: 100px;
        display: flex;
        img {
          margin: auto;
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
      }
      .top-name {
        flex: 1;
        min-height: 100px;
        .Editor {
          width: 100%;
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: flex-end;
        }
        .name-age {
          width: 100%;
          height: 30px;
          line-height: 30px;
          span {
            margin-left: 15px;
          }
          span:nth-child(1) {
            font-size: 20px;
          }
        }
        .id-age{
          width: 100%;
          height: 30px;
          line-height: 30px;
          span {
            margin-left: 15px;
          }
        }
      }
    }
    .person-btm {
      width: 100%;
      height: 35px;
      line-height: 35px;
      i {
        margin-left: 25px;
        margin-right: 10px;
      }
      i:nth-child(1) {
        margin-left: 0px;
      }
    }
  }
}
/deep/.el-input__inner {
  height: 30px !important;
  font-size: 14px;
}
// 编辑
.age-Editor {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #f8f8f8;
  .Editor-body {
    width: 94%;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      font-weight: 600;
    }
    .body {
      width: 100%;
      display: flex;
      margin-top: 20px;
      position: relative;
      .body-left {
        width: 18%;
        div {
          height: 35px;
          line-height: 35px;
          margin-top: 10px;
        }
      }
      .body-cen {
        width: 30%;
        p {
          height: 35px;
          line-height: 35px;
          margin-top: 10px;
          span {
            color: #3894ff;
          }
        }
        // 性别选择
        .sex_box {
          width: 100%;
          height: 35px;
          display: flex;
          margin-top: 10px;
          font-size: 14px;
          .Select {
            min-width: 70px;
            min-height: 30px;
            border-radius: 5px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #c4e1fe;
            background-color: #e6f1fc;
            cursor: pointer;
          }
          .Unchecked {
            min-width: 70px;
            min-height: 30px;
            border-radius: 5px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #c4e1fe;
            background-color: #ffffff;
            cursor: pointer;
          }
          div:nth-child(2) {
            margin-left: 20px;
          }
        }
      }
      .body-right {
        position: absolute;
        right: 0;
        width: 20%;
        .img-avatar{
            width: 120px;
            height: 120px;
            border: 1px solid gold;
            border-radius: 50%;
        }
      }
    }
    .bottom{
        width: 100%;
        height: 35px;
        display: flex;
        justify-content:flex-end;
        p{
            width: 80px;
            height: 35px;
            background-color: #3894ff;
            border-radius: 5px;
            line-height: 35px;
            text-align: center;
            color: #ffffff;
        }
        p:nth-child(1){
            background-color: #919191;
            margin-right: 20px;
        }
    }
  }
}
</style>
